<!DOCTYPE html>
<!-- saved from url=(0043)http://bubblepix.com/images/html5still.html -->
<html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta charset="utf-8">
</head>
<body>
    <div id="container"></div>
    <script src="html5still_files/Three.ligth.js"></script>
    <video id="video" autoplay style="display:none">
<source src="IOS_57390328c172240557656ba85a6b6e13.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>
</video>

<script>

    var videoTexture;
    var camera, controls;
    var isUserInteracting = false;
    var onMouseDownMouseX = 0;
    var eventMouseX = 0;

    //Get parameter from XML file
    var xmlDoc=loadXMLDoc("beach.xml");
 
    var cx = parseFloat(xmlDoc.getElementsByTagName('play_objects')[0].getElementsByTagName('crop')[0].getAttribute('cx'));
    var cy = parseFloat(xmlDoc.getElementsByTagName('play_objects')[0].getElementsByTagName('crop')[0].getAttribute('cy'));

    function loadXMLDoc(dname)
    {
        if (window.XMLHttpRequest)
        {
          xhttp=new XMLHttpRequest();
        }
        else
        {
          xhttp=new ActiveXObject("Microsoft.XMLHTTP");
        }
        xhttp.open("GET",dname,false);
        xhttp.send();
        return xhttp.responseXML;
    }


        window.requestAnimFrame = (function(callback){
        return window.requestAnimationFrame ||
        window.webkitRequestAnimationFrame ||
        window.mozRequestAnimationFrame ||
        window.oRequestAnimationFrame ||
        window.msRequestAnimationFrame ||
        function(callback){
            window.setTimeout(callback, 1000 / 60); //60fps
        };
    })();

    function animate(lastTime, angularSpeed, three){


              // update
            var date = new Date();
            var time = date.getTime();
            var timeDiff = time - lastTime;
            var angleChange = angularSpeed * timeDiff * 2 * Math.PI / 1000;

            //Default rotation
            if(!isUserInteracting)
                three.sphere.rotation.y += angleChange;

            //Rotation of sphere in function of the mouse move
            else {
                if(eventMouseX < onMouseDownMouseX)
                    three.sphere.rotation.y -= angleChange*Math.exp((onMouseDownMouseX - eventMouseX)*0.005);
                else if(eventMouseX > onMouseDownMouseX)
                   three.sphere.rotation.y += angleChange*Math.exp((eventMouseX-onMouseDownMouseX)*0.005);
            }
            lastTime = time;

            // render
            three.renderer.render(three.scene, three.camera);

                // update camera controls
                //controls.update();

            if ( texture ) texture.needsUpdate = true;

            // request new frame
            requestAnimFrame(function(){
                animate(lastTime, angularSpeed, three);
            });
          
    }

    window.onload = function(){

            var angularSpeed = 0.05; // revolutions per second
            var lastTime = 0;
            
            // renderer
            var renderer = new THREE.WebGLRenderer();
            //var   renderer = new THREE.CanvasRenderer();
            renderer.setSize(610, 250);
            document.body.appendChild(renderer.domElement);

            // camera
            camera = new THREE.PerspectiveCamera(45, window.innerWidth / (window.innerHeight/2), 1, 220); //fov (60), aspect, near, far
            camera.position.z = 0;
                    
            // scene
            var scene = new THREE.Scene();

            // material
            var stillMaterial = new THREE.MeshLambertMaterial({
                map: THREE.ImageUtils.loadTexture("beach.jpg")
            }); 

            video = document.getElementById( 'video' );

            image = document.createElement( 'canvas' );
            image.width = 1024;
            image.height = 512;

            imageContext = image.getContext( '2d' );
            imageContext.fillStyle = '#000000';
            imageContext.fillRect( 0, 0, 512, 512 );

            texture = new THREE.Texture( video );
            texture.minFilter = THREE.LinearFilter;
            texture.magFilter = THREE.LinearFilter;

            var material = new THREE.MeshBasicMaterial( { map: texture, overdraw: true } );

            // sphere
            //( radius, widthSegments, heightSegments, phiStart, phiLength, thetaStart, thetaLength )
            var sphere = new THREE.Mesh(new THREE.SphereGeometry(200, 64, 32, 1.3+cy, Math.PI/3, 0.18+cx, Math.PI, cx, cy), stillMaterial); //radius, segments, rings, phiStart, phiLength, thetaStart, thetaLength
            sphere.overdraw = true;
            scene.add(sphere);

            

            // add full ambient lighting
            var ambientLight = new THREE.AmbientLight(0xffffff);
            scene.add(ambientLight);

            // add directional light source
            //var directionalLight = new THREE.DirectionalLight(0xffffff);
            //directionalLight.position.set(1, 1, 1).normalize();
            //scene.add(directionalLight);

            // create wrapper object that contains three.js objects
            var three = {
                renderer: renderer,
                camera: camera,
                scene: scene,
                sphere: sphere
            };



            //Add mouse controls
            document.addEventListener( 'mousedown', onDocumentMouseDown, false );
            document.addEventListener( 'mousemove', onDocumentMouseMove, false );
            document.addEventListener( 'mouseup', onDocumentMouseUp, false );
            document.addEventListener( 'mousewheel', onDocumentMouseWheel, false );

            function onDocumentMouseDown( event ) {

                event.preventDefault();
                isUserInteracting = true;
                onMouseDownMouseX = event.clientX;
                eventMouseX = event.clientX;
                document.body.style.cursor = 'w-resize';

            }

            function onDocumentMouseMove( event ) {

                if ( isUserInteracting )
                    eventMouseX = event.clientX;
                
            }

            function onDocumentMouseUp( event ) {

                isUserInteracting = false;
                eventMouseX = 0;
                onMouseDownMouseX = 0;
                document.body.style.cursor = 'default';

            }

            function onDocumentMouseWheel( event ) {

                // WebKit

                if ( event.wheelDeltaY ) {

                    three.sphere.rotation.x -= event.wheelDeltaY * 0.0003;

                // Opera / Explorer 9

            } else if ( event.wheelDelta ) {

                three.sphere.rotation.x -= event.wheelDeltaY * 0.0003;

                // Firefox

            } else if ( event.detail ) {

                three.sphere.rotation.x += event.wheelDeltaY * 0.0003;

            }
        }
            
            /*
             * wait for texture image to load before
             * starting the animation
             */ 
             var textureImg = new Image();
             textureImg.onload = function(){
                animate(lastTime, angularSpeed, three, this);
            };
            textureImg.src = "beach.jpg";
        };

    
</script>
</body></html>